<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <!-- 子传父 在父组件的子标签上设置一个自定义事件 -->
    <TodoHeader @add="addFn" :list="list"></TodoHeader>
    <!-- 父传子 ：变量=“下方数据数组名称” -->
    <!-- 子传父 在父组件的子标签上设置一个自定义事件  -->
    <TodoMain :list="showArr" @del="deleteFn"></TodoMain>
    <!-- 父传子 ：变量=“下方数据数组名称”  父传子-->
    <TodoFooter :list="showArr" @changeType="typeFn"  @clear="clearFun"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
         // 8.1 默认从本地取值
      list: JSON.parse(localStorage.getItem('todolist'))||[],
      // 6.4 先中转接收类型字符串
      getSel : "all",
    };
  },
  methods: {
    addFn(taskName) {
      // 把新增传过来的数据添加到数组里面
      this.list.push({
        // 如果有id直接在最后一项的id+1  如果没有就从新生成id 100开始
        id: this.list.length ? this.list.at(-1).id + 1 : 100,
        name: taskName,
        isDone: false,
      });
    },
    deleteFn(id) {
      // 利用filter方法筛选出来没有被选择的 filter !== 相当于把这个数或者变量去除掉
      this.list = this.list.filter((item) => item.id !== id);
    },
    typeFn(str) {
      this.getSel = str; // 'all' 'yes' 'no' // 修改类型
    },
    // 清除已完成
    clearFun(){
       this.list = this.list.filter(obj => obj.isDone == false)
    }
  },
  computed: {
    //定义showArr数组 - 通过list配合条件筛选而来
    showArr() {
      if (this.getSel === "yes") {
        return this.list.filter((item) => item.isDone === true);
      } else if (this.getSel === "no") {
        return this.list.filter((item) => item.isDone === false);
      } else {
        return this.list;
      }
    },
  },
  watch:{
    list:{
    deep: true, 
    handler(){
      // 8.0 只要list变化 - 覆盖式保存到localStorage里
localStorage.setItem('todolist',JSON.stringify(this.list))
    }
    }
  }
};
</script>